Cloudflareで完結するワールドカップの社内トトカルチョアプリ

Cloudflareで完結するワールドカップの社内トトカルチョアプリ

Clock Icon2022.11.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ベルリンのしがひです。ワールドカップですね。

ドイツでは出身国とドイツの試合の日には休暇をとる慣わしがあるくらい特別なイベントです。さらに盛り上がるために、しばしば会社や組織内で賭け事が催されます。今回、ベルリンオフィスでこれを開催するためにアプリを作成しました。

法的要件と対応

欧州各国で似たような賭博規制がありますが、ドイツでは以下のような条件で開帳が認められています。

  •  非定期開催であること。
  •  参加者が限定され、公募していないこと。
  •  ルールが明確、確定していること。
  •  賞金が少額であること。
  •  データの保全(5年間)

多くの場合、Excelシートで作った計算機がワールドカップやユーロの時期になるとネット上で出回り、サッカー好きの社員が幹事になって共有フォルダに置いたシートに書き込むといった方法で開催されますが、それではデータのロックが不十分で、ある意味幹事の神の手を暗に認めてしまいます。またシートは容易に外部に持ち出せるため、職場以外から参加されて公募しないという要件を満たせない可能性があります。

今回はCloudflare Workers KVにデータを保存するWebアプリを作り、サイト全体をCloudflare Accessで限定する方法でこの要件をクリアしました。サイトは https://worldcup2022.classmethod.cf/ にありますが、@classmethod.de 以外のメールアドレスには閲覧のためのワンタイムパスワードが送付されません。

ルール

ワールドカップのプレディクションにはいくつかバリエーションがありますが、オッズ設定をしない複勝複式ポイント配当制が簡単で人気です。

ただ、ゴール数、ドローまで予想するポイント制は参加の敷居が上がってしまい、グループリーグ終了後にあらためて決勝リーグのプレディクションを入力してもらう必要があるため、今回は最もシンプルな生存者ポイント方式を採用しました。

予想した生存チームで、

  •  ベスト16は順位を問わずそれぞれ1ポイント
  •  準々決勝、準決勝はそれぞれ2ポイント
  •  3位は5ポイント
  •  優勝は10ポイント

を付与して、掛金プール総額をポイントに応じて配当します。

掛金プールは私が100ユーロ分ファンディングたうえで、1口10ユーロで配当のダブルダウンができるようにしました。こうすることで、おカネを賭けない人も参加していくらかの配当をもらうことができます。また10ユーロのベットのうち5ユーロはウクライナで活動している国際赤十字にPaypalチャリティーを通じて寄付されます。

作ってみた

アプリはベルリンのフロントエンドエンジニアであるAnaさんが製作しました。

技術、およびプラットフォームのスタックはブログ記事の通り、TypeScriptで書かれたReact、Cloudflare Workers、Cloudflare Workers KV、そしてホスティングはCloudflare Pagesです。アプリの動作からデータの保持まで、すべてCloudflareのデベロッパープラットフォームで完結しています。

Githubのブランチに書いたコードをコミットするとCloudflare Pagesにプッシュされアプリがビルドされます。

クラスメソッドではもう1年以上にわたってCloudflare Pagesを本番運用していますが、ビルドスピードの改善など着々と機能追加改善がされていて今後のさらなる活用が期待されます。

入力したプレディクションはWokers KVのValueにすべてJSONとして格納され、Namespaceを与えてReact側から引っ張り、各自がどういうプレディクションをしたかを他の人がGUIで閲覧できるようになっています。


いかがでしたでしょうか。浮かんだアイデアや企画などをすぐに開発してリリースするという面で、Cloudflareを使うと環境の準備にそれほど時間がかからず、エンジニアのもてるスキルを存分に発揮することができます。

CloudflareのデベロッパープラットフォームはエッジワーカーのWorkersを中核に、サーバーレス、エッジコンピュートに特化した必要な機能を続々とリリースしていて、すでにエッジで動作するサーバーレスデータベース D1もアルファ公開されていることから、今後本格的なアプリケーション製作に採用されていくと思っています。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.